{% extends 'base.html' %}

{% block title %}慧言绘语学术汉专业写作平台{% endblock %}
{% load static %}
{% block content %}
    <style>
        /* 复用主页面.html 的样式 */
        :root {
            --primary-blue: #524eef;
            --text-gray: #6D6D6D;
            --accent-yellow: #FFF8E5;
            --accent-purple: #E8E6F9;
        }

        .box-1 {
            background: -webkit-linear-gradient(top,
                    #ffffff 0%,
                    #fffede 33%,
                    #cdccff 66%,
                    #524eef 100%);
            background: linear-gradient(to bottom,
                    #ffffff 0%,
                    #fffede 33%,
                    #cdccff 66%,
                    #524eef 100%);
            width: 100%;
            padding-bottom: 12%;
        }

        .search-container {
            display: flex;
            align-items: center;
            gap: 1%;
            margin: 5% 30%;
        }

        .search-input {
            margin-right: 10%;
            padding: 3% 165% 3% 7%;
            border: 2px solid var(--primary-blue);
            border-radius: 50px;
            font-size: 16px;
            color: var(--text-gray);
            background: rgba(255, 255, 255, 0.9);
            font-size: 20px;
        }

        .search-icon {

            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: transform 0.2s;
            background: #524eef; 
            border: none;       /* 移除描边 */
            border-radius: 50%; /* 正圆形 */
            margin-left: 10px;  /* 与输入框间距微调 */
        }



        .daily-word-container {
            max-width: 1000px;
            margin: 20px auto;
            padding: 25px;
            display: flex;
            align-items: center;
        }
        /* 标题区域 */
        .header-group {
            text-align: center;
            margin-top: 80px;
            position: relative;
            margin-top: 15vh;
            /* 使用视口单位控制间距 */
            transform: translateY(20%);
            /* 微调定位 */
            margin-bottom: 40px;
        }
        .daily-button {
            background: #524eef;
            color: white;
            border: none;
            border-radius: 20px;
            padding: 8px 25px;
            font-size: 20px;
            white-space: nowrap;
            cursor: pointer;
            transition: opacity 0.3s;
            margin-right: 4%;
        }
        .daily-button:hover {
            opacity: 0.9;
        }
        .mt-4 text-center{
            margin: 50%;
        }
        .container-mt-4 {
            gap: 15%;
            padding: 20px;
            max-width: 1000px;
            margin: 20px auto;
            display: flex;
            gap: 15%;
            padding: 20px;
            background: white;
            text-align: center;
            flex-direction: column;
}
.mt-4 recommendation {
        max-width: 1000px;
        display: flex;
    }
    .display: flex
;
display: flex
;
{
        display: flex;
 align-items: center;}
        .mt-4 text-center{
            margin: 50%;
        }
        .mt-4 {
            width: 120px;
            border-radius: 8px;
            padding: 16px 0;
        }
        .mt-4 out-of-scope{
            display: flex;
        }

        .list-unstyled {
            margin: 0;
            padding: 0;
            list-style: none;
            color: white;
            font-family: Arial, sans-serif;
            font-size: 24px;
            font-weight: bold;
            line-height: 1.5;
        }

        .list-unstyled li {
            margin: 4px 0;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
        }

        .mt-4:nth-child(2) .list-unstyled {
            color: red;
            /* 淡紫色文字 */
        }

        .nlp-btn {
            background: var(--primary-blue);
            color: white;
            border: none;
            border-radius: 20px;
            padding: 8px 25px;
            font-size: 16px;
            white-space: nowrap;
            cursor: pointer;
            transition: opacity 0.3s;
            text-decoration: none;
            display: inline-block;
            margin: 2px 0;
        }

        .nlp-btn:hover {
            opacity: 0.9;
            color: white;
        }
    </style>

    <div class="box-1">
        <div class="header-group">
            <img src="{% static 'media/logo-home.png' %}" alt="学术汉语专业化 慧言绘语" class="title-image" style="max-width: 600px;">
        </div>
        <div class="search-container">
            <form action="{% url 'search' %}" method="get" style="display: flex">
                <input type="text" class="search-input" name="query" placeholder="搜索术语或单词">
                <button type="submit" class="search-icon" style="
                border: none;
                width: 40px;
                height: 40px;
                border-radius: 50%;
                cursor: pointer;">
                    <svg width="30" height="30" viewBox="0 0 24 24" fill="white">
                        <path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.7.7l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"/>
                      </svg>
                </button>

            </form>
        </div>
    </div>

    {% if user.is_authenticated and daily_word %}
        <div class="daily-word-container">
            <button class="daily-button"><b>每日一词</b></button>
            <div>
                · {{ daily_word.word }} - 等级: {{ daily_word.get_level_display }}
                {% if daily_word.example_sentence %}
                    <br>例句: {{ daily_word.example_sentence }}
                {% endif %}
            </div>
        </div>
    {% endif %}
    
    {% if user.is_authenticated and truly_out_of_scope_recommendations %}
             <div class="mt-4 recommended">
                  <button class="daily-button" style="margin-left: 10%;"><b>推荐</b>
                   </button>
            </div>     
        <div class="container-mt-4">
            <div class="mt-4 out-of-scope" style="
                display: flex;
                justify-content: center;
                gap:40%;
                padding-top:1%;
                background: white;
                text-align:center;
                ">
                <div class="mt-4 text-center" >
                <ul class="list-unstyled">
                    {% for term in truly_out_of_scope_recommendations %}
                        <li>
                            <a href="{% url 'term_detail' term.id %}" class="nlp-btn">{{ term.term_name }}</a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
    {% endif %}
    {% if user.is_authenticated and false_out_of_scope_recommendations %}
            <div class="mt-4 text-center">
                <ul class="list-unstyled">
                    {% for term in false_out_of_scope_recommendations %}
                        <li>
                            <a href="{% url 'term_detail' term.id %}" class="nlp-btn">{{ term.term_name }} </a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
    {% endif %}
    
    {% if user.is_authenticated and recommended_words %}
            <div class="mt-4 text-center" >
                <ul class="list-unstyled">
                    {% for word in recommended_words %}
                        <li>
                            <a href="{% url 'word_detail' word.id %}" class="nlp-btn">{{ word.word }}</a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
    {% endif %}
    </div>
        </div>
{% endblock %}
